<template>
  <view class="title" :style="getTitleStyle()">
    <view class="title-name" :style="{ textAlign }">{{ titleName }}</view>
  </view>
</template>

<script lang="ts" setup>
import { useSystemInfo } from '@/hooks';
import { getTitleName } from '@/refStore/titleName';

const { customBarRef } = useSystemInfo();
defineProps({
  textAlign: { type: String, default: 'center' },
});

const titleName = getTitleName();
const getTitleStyle = () => ({
  paddingTop: `${customBarRef.value}rpx`,
});
</script>

<style lang="less" scoped>
.title {
	padding: 0  @themeMargin;
  .title-name {
    font-family: PingFang-SC-Regular;

    color: #fff;
  }
}
</style>
